<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <el-card shadow="hover">
          <div class="div1">
            <p>{{name}}</p>
            <p>时间：<el-checkbox v-model="morning">上午</el-checkbox><el-checkbox v-model="afternoon">下午</el-checkbox></p>
            <p>学历：<el-checkbox v-model="xueli">本科</el-checkbox></p>
            <p>工作年限：<el-checkbox v-model="tyear">3年</el-checkbox><el-checkbox v-model="fyear">4年</el-checkbox></p>
            <p>Java Web：<el-checkbox v-model="base">Java基础、集合、IO、设计模式</el-checkbox></p>
            <p>Spring全家桶：<el-checkbox v-model="javaWeb">Spring、SpringBoot、SpringMVC、Mybatis/Mybatis-Plus</el-checkbox></p>
            <p>微服务：<el-checkbox v-model="springCloud">SpringCloud Netflix/Alibaba、Dubbo、Nacos、Zookeeper、Sentinel</el-checkbox></p>
            <p>数据库：<el-checkbox v-model="dataBase">Mysql</el-checkbox></p>
            <p>缓存：<el-checkbox v-model="cache">Redis</el-checkbox></p>
            <p>操作系统：<el-checkbox v-model="linux">Linux</el-checkbox></p>
            <p>部署：<el-checkbox v-model="docker">Docker</el-checkbox></p>
            <p>前端：<el-checkbox v-model="qianduan">HTML、css、js、vue</el-checkbox></p>
            <el-button type="primary" @click="generateContent">生成</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <el-card shadow="hover">
          <div class="div1">
            <p>内容</p>
            <el-input
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              v-model="content">
            </el-input>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    
  },
  data() {
    return {
      name: 'boss打招呼小程序',
      content: '您好BOSS！',
      base: false,
      tyear: false,
      fyear: false,
      morning: false,
      afternoon: false,
      xueli: false,
      javaWeb: false,
      springCloud: false,
      dataBase: false,
      cache: false,
      linux: false,
      docker: false,
      qianduan: false
    }
  },
  methods: {
    generateContent(){
      this.content = ``
      if (this.morning) {
        this.content = 'HR' + '上午好！看到贵公司的招聘要求，觉得很特别合适，以下是我的简单介绍：\n'
      } else if (this.afternoon) {
        this.content = 'HR' + '下午好！看到贵公司的招聘要求，觉得很特别合适，以下是我的简单介绍：\n'  
      }
      if (this.xueli) {
        this.content += '全日制本科学历，'
      }
      if (this.tyear) {
        this.content += '3年工作经验；\n'
      } else if (this.fyear) {
        this.content += '4年工作经验；\n'
      }
      this.content += '掌握的技术栈有：\n'
      if (this.base) {
        this.content += '扎实的Java基础、集合、IO、设计模式，并能够在项目中灵活运用；\n'
      }
      if (this.javaWeb) {
        this.content += '熟悉Spring、SpringBoot、SpringMVC、Mybatis，并研究过部分组件的核心源码；\n'
      }
      if (this.springCloud) {
        this.content += '熟悉微服务框架SpringCloud Netflix/Alibaba、Dubbo、Nacos、Zookeeper、Sentinel，并有丰富的分布式微服务项目经验；\n'
      }
      if (this.dataBase) {
        this.content += '熟悉MySQL，并拥有百万级数据的SQL调优经验；\n'
      }
      if (this.cache) {
        this.content += '熟悉缓存Redis，拥有缓存穿透、缓存击穿、缓存雪崩的处理方案，并用Redis实现分布式锁；\n'
      }
      if (this.linux) {
        this.content += '熟悉Linux操作系统，并能够使用常用命令查看日志解决线上问题；\n'
      }
      if (this.docker) {
        this.content += '了解docker，能够使用docker进行服务部署；\n'
      }
      if (this.qianduan) {
        this.content += '对前端技术HTML、css、js、vue也有一些了解；\n'
      }

    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.div1 {
  height: 480px
}
</style>
